<!-- 综合预警模块 -->
<template>
    <div>
      <!-- 左 -->
      <!-- <OpenMap></OpenMap> -->
      <div class="left-panel">
        <div class="left-panel-title">
          <div class="title-left"></div>
          <div class="title-center">今日雨水情</div>
          <div class="title-right"></div>
        </div>
        <div class="left-panel-content">
          <div class="left-panel-content-leftcontent">
            <div class="left-panel-content1">
              <div class="left-panel-content1-title">
                <PanelTitle title="今日雨水情" :content="rainToday"
                  >《</PanelTitle
                >
              </div>
              <div class="left-panel-content1-content">
                <div class="ysq1">
                  <div class="number">{{ rainTodayValue.warningRiver }}</div>
                  <div class="type">超警戒河流</div>
                </div>
                <div class="ysq2">
                  <div class="number">{{ rainTodayValue.warningReservoir }}</div>
                  <div class="type">超汛限水库</div>
                </div>
                <div class="ysq3">
                  <div class="number">{{ rainTodayValue.mainRiver }}</div>
                  <div class="type">主要河流</div>
                </div>
              </div>
            </div>
            <div class="left-panel-content2">
              <div class="left-panel-content2-title">
                <div class="content2-title-left">
                  <PanelTitleleft title="最新水情"></PanelTitleleft>
                </div>
                <button
                  class="content2-menu"
                  :class="{ active: hdShow }"
                  @click="changesq('hd')"
                  autofocus
                >
                  河道水情
                </button>
                <button
                  class="content2-menu"
                  :class="{ active: skShow }"
                  @click="changesq('sk')"
                >
                  水库水情
                </button>
                <button class="content2-tool content2-tool1" @click="showPoints">
                  <img src="../../assets/iconfont/01.png" alt="" title="地图展示"/>
                </button>
                <button class="content2-tool" @click="getAllRain">
                  <img src="../../assets/iconfont/02.png" alt="" title="全部站点" />
                </button>
                <button class="content2-tool" @click="ShowDetails"><img src="../../assets/iconfont/03.png" alt="" title="详情"/></button>
                <div class="detail">
                  <details-dialog
                    v-if="isDialogVisible"
                    @close="isDialogVisible = false"
                    :hd-show="hdShow"
                  ></details-dialog>
                </div>
              </div>
              <div class="left-panel-content2-content">
                <div class="table-header">
                  <div class="col1">站名</div>
                  <div class="col2">时间</div>
                  <div class="col3">水位(mm)</div>
                  <div class="col4" v-show="hdShow">超警戒</div>
                  <div class="col4" v-show="skShow">超汛限</div>
                </div>
                <div class="table-content">
                  <vue-seamless-scroll
                    class="scroll_box"
                    :data="LatestRainList"
                    :class-option="defineScroll"
                    v-show="hdShow"
                  >
                  
                      <li
                        v-for="(item, index) in LatestRainList"
                        :key="index"
                        :class="{
                          'green-text': item.status_difference < 0,
                          'red-text': item.status_difference >= 0,
                        }"
                        @click="ShowRainPoints(item)"
                      >
                        <span class="name">{{ item.stnm }}</span>
                        <span class="Etiology">
                          {{ item.latestobservetime }}
                        </span>
                        <span class="status">
                          {{ item.smallscalewaterstatus }}
                        </span>
                        <span class="time">{{ item.status_difference }}</span>
                      </li>
               
                  </vue-seamless-scroll>
                  <vue-seamless-scroll
                    class="scroll_box"
                    :data="LatestRainList"
                    :class-option="defineScroll"
                    v-show="skShow"
                  >
                   
                      <li
                        v-for="(item, index) in LatestRainList"
                        :key="index"
                        :class="{
                          'green-text': item.status_difference < 0,
                          'red-text': item.status_difference >= 0,
                        }"
                        @click="ShowRainPoints(item)"
                      >
                        <span class="name">{{ item.reservoirName }}</span>
                        <span class="Etiology">
                          {{ item.observtime }}
                        </span>
                        <span class="status">
                          {{ item.waterleve }}
                        </span>
                        <span class="time">{{ item.status_difference }}</span>
                      </li>
                  
                  </vue-seamless-scroll>
                </div>
              </div>
            </div>
            <div class="left-panel-content3">
              <div class="left-panel-content3-title">
                <div class="content3-title-left">
                  <PanelTitleleft title="面雨量实况"></PanelTitleleft>
                </div>
                <button
                  class="content3-menu"
                  :class="{ active: zxhlShow }"
                  @click="changeyl('zxhl')"
                  autofocus
                >
                  中小河流
                </button>
                <button
                  class="content3-menu"
                  :class="{ active: shgShow }"
                  @click="changeyl('shg')"
                >
                  山洪沟
                </button>
                <button
                  class="content3-menu"
                  :class="{ active: ylskShow }"
                  @click="changeyl('ylsk')"
                >
                  水库
                </button>
                <button
                  class="content3-menu"
                  :class="{ active: yhdShow }"
                  @click="changeyl('yhd')"
                >
                  隐患点
                </button>
                <button
                  class="content3-tool content3-tool1"
                  @click="showDailyRain"
                >
                <img src="../../assets/iconfont/01.png" alt="" title="地图展示"/>
                </button>
                <button class="content3-tool" @click="makingSelect"> <img src="../../assets/iconfont/03.png" alt="" title="选择"/></button>
                <select-dialog
                  calss="Dialog"
                  v-if="isSelectDialogVisible"
                  @close="isSelectDialogVisible = false"
                  :zxhlShow="zxhlShow"
                  :shgShow="shgShow"
                  :ylskShow="ylskShow"
                  :yhdShow="yhdShow"
                  @updateData="handleUpdateData"
                ></select-dialog>
              </div>
              <div class="left-panel-content3-content">
                <div class="table-header">
                  <div class="col1">序号</div>
                  <div class="col2" v-show="zxhlShow">河流名称</div>
                  <div class="col2" v-show="shgShow">山洪沟名称</div>
                  <div class="col2" v-show="ylskShow">水库名称</div>
                  <div class="col2" v-show="yhdShow">隐患点名称</div>
                  <div class="col3">雨量(mm)</div>
                  <div class="col4">时间</div>
                </div>
                <div class="table-content">
                  <vue-seamless-scroll
                    class="scroll_box"
                    :data="dailyRainList"
                    :class-option="defineScroll"
                  >
                      <li
                        v-for="(item, index) in dailyRainList"
                        :key="index"
                        :class="getylColor(dailyRainList, item.arearain)"
                        :style="{
                                                color: getylColor(dailyRainList, item.arearain),
                                            }"
                      >
                        <span class="name">{{ index + 1 }}</span>
                        <span class="Etiology">{{ item.name }}</span>
                        <span class="status">{{ item.arearain }}</span>
                        <span class="time">{{ item.observtime }}</span>
                      </li>
                  </vue-seamless-scroll>
                </div>
              </div>
            </div>
          </div>
          <div class="left-panel-content-rightcontent">
            <div class="right-img1"></div>
            <div class="right-img2"></div>
            <div class="right-img3"></div>
          </div>
        </div>
      </div>

      <!-- 右 -->
      <div class="right">
        <div class="title">
          <div class="title-image1"></div>
          <div class="title-content">风险预警</div>
          <div class="title-image2"></div>
        </div>

        <!-- 上 -->
        <div class="right-top">
          <div class="right-top-left"></div>
          <div class="right-top-right">
            <PanelTitle title="风险预警产品" :content="warnContent"></PanelTitle>
            <div class="right-top-content" @click.stop="clickItem">
              <vue-seamless-scroll
                :data="products"
                class="warp"
                :class-option="defineScroll"
              >
                <li v-for="(item, index) in products" :key="item.docid">
                  <span
                    :data-id="item.warningId"
                    data-func="mark"
                    :style="{
                      color: getColor(item.color),
                    }"
                  >
                    {{ item.description }}
                  </span>
                  <div class="icon-btn">
                    <i
                      class="iconfont icon-yanjing"
                      :data-id="item.docid"
                      data-func="show"
                    ></i>
                    <i
                      class="iconfont icon-baocun"
                      :data-id="item.docid"
                      data-func="download"
                    ></i>
                  </div>
                </li>
              </vue-seamless-scroll>
            </div>
            <div class="right-top-bottom"></div>
          </div>
        </div>

        <!-- 中 -->
        <div class="right-mid">
          <div class="right-mid-left"></div>
          <div class="right-mid-right">
            <PanelTitle title="风险区划" :content="warnAreaContent"></PanelTitle>
            <div class="right-mid-content">
              <div class="line1">
                <template v-for="(item, index) in warningAreas">
                  <RegularHexagon
                    v-if="index < 2"
                    :title="item.title"
                    :icon="item.icon"
                    @getRiskZoningInfo="getRiskZoningInfo"
                  ></RegularHexagon>
                </template>
              </div>
              <div class="line2">
                <template v-for="(item, index) in warningAreas">
                  <RegularHexagon
                    v-if="index >= 2"
                    :title="item.title"
                    :icon="item.icon"
                    @getRiskZoningInfo="getRiskZoningInfo"
                  ></RegularHexagon>
                </template>
              </div>
            </div>
            <div class="right-mid-bottom"></div>
          </div>
        </div>

        <!-- 下 -->
        <!-- 下 -->
        <div class="right-bottom">
          <div class="right-bootom-left"></div>
          <div class="right-bottom-right">
            <PanelTitle
              :title="menus[showQureyPanel].title"
              :content="menus[showQureyPanel].eng"
            ></PanelTitle>
            <div class="right-bottom-content">
              <!-- s实况 -->
              <Facts v-if="showQureyPanel == 0" @handFacts="handFacts"></Facts>
              <!-- 预报 -->
              <Yubao v-if="showQureyPanel == 1" @handleYuBao="handleYuBao"></Yubao>
              <!-- 雷达 -->
              <LeiDa
                v-if="showQureyPanel == 2"
                @handleLeida="handleLeida"
              ></LeiDa>
              <!-- 云图 -->
              <YuTu v-if="showQureyPanel == 3" @handleYunTu="handleYunTu"></YuTu>
              <!-- 气候统计 -->
              <ClimateSum v-if="showQureyPanel == 4" @showDialog="handleShowRiverInfoCharts"></ClimateSum>
            </div>
            <!-- <div class="right-bottom-bottom"></div> -->
          </div>
        </div>
      </div>

      <!-- 风向预警的产品西南西弹窗 -->
      <ShowRiskInfo
        :dialogTableVisible="isShowRiskInfo"
        @closed="closed"
        :currentRiskInfo="currentRiskInfo"
      />
      <!-- 测站图例 -->
      <StationLegend></StationLegend>
      <!-- 预警信息弹窗组件 -->
      <WarningInfo></WarningInfo>
      <!-- 下载的a标签 -->
      <a style="display: none" ref="downloadContainer" download></a>
      <DialogRiver v-if="isShowRiverDialog" 
      :dialogTableVisible="isShowRiverDialog" 
      :currentRiver="selectCurrentRiver"
      @closedRiverDialog="closedRiverDialog"
      ></DialogRiver>
    </div>
  </template>

  <script>
  import { mapMutations } from "vuex";
  import PanelTitle from "@/components/ui/panelTitle.vue";
  import PanelTitleleft from "@/components/ui/panelTitleleft.vue";
  import RegularHexagon from "@/components/ui/regularHexagon.vue";
  import TypicalCase from "@/components/echarts/typicalCase.vue";
  import vueSeamlessScroll from "vue-seamless-scroll";
  import { waringProducts, warningArea } from "@/store/menuData";
  import DetailsDialog from "./components/DetailsDialog.vue";
  import SelectDialog from "./components/SelectDialog.vue";
  import ShowRiskInfo from "@/components/ui/showRiskInfo..vue";
  import Facts from "@/components/select/facts.vue";
  import Yubao from "@/components/select/yubao.vue";
  import LeiDa from "@/components/select/leiDa.vue";
  import YuTu from "@/components/select/yutu.vue";
  import ClimateSum from "@/components/select/climateSum.vue";
  import StationLegend from "@/components/ui/stationLegend.vue";
  import WarningInfo from "@/components/ui/warningInfo.vue";
  import { Vector as VectorSource } from "ol/source";
  import { Vector, Heatmap, Image } from "ol/layer";
  import { Feature } from "ol";
  import { Point } from "ol/geom";
  import { Stroke, Style, Fill, Circle, Text } from "ol/style";
  import { ImageStatic } from "ol/source";
  import { transformExtent } from "ol/proj";
  //加载风险预警产品信息
  import { warningProductList, warningProductDetail } from "@/api/zhjcright";
  import { menuDataFooter } from "@/store/menuData";
  //河流信息弹窗组件
  import DialogRiver from '@/components/ui/dialogRiver.vue'
  import {
    getRainToday,
    getRiverRain,
    getAllRiverRain,
    getReservoirRain,
    getAllReservoirRain,
    getRiverStationInfo,
    getReservoirStationInfo,
    getRiverArea,
    getReservoirArea,
    getRiverList,
    getGullyList,
    getReserviorList,
    getYhdList,
    getAllRiverStationInfo,
    getAllReservoirStationInfo
  } from "@/api/zhjcleft";
  export default {
    name: "ComprehensiveMonitorAlarm",
    props: ["map"],
    components: {
      PanelTitle,
      RegularHexagon,
      TypicalCase,
      vueSeamlessScroll,
      PanelTitleleft,
      DetailsDialog,
      SelectDialog,
      ShowRiskInfo,
      YuTu,
      Facts,
      Yubao,
      LeiDa,
      ClimateSum,
      StationLegend,
      WarningInfo,
      DialogRiver,
    },
    data() {
      return {
        //是否地图展示
        ishdMapShow: false,
        isskMapShow: false,
        //雨量实况数据
        riverList: [],
        reservoirList: [],
        gullyList: [],
        yhdList: [],
        colorRange: [],
        dailyRainList: [
          {
            latestobservetime: "2024-09-26 09:00:00",
            smallscalewaterstatus: 3.0,
            stnm: "阿勒泰水文站点",
            status_difference: "1",
            colorRange: [],
          },
        ],

        warnContent: "RISK WARNING PRODUCTS",
        warnAreaContent: "RISK ZONING",
        typicalCases: "TYPICAL CASES",
        rainToday: "RAIN TODAY",
        skShow: false,
        hdShow: true,
        zxhlShow: true,
        yhdShow: false,
        shgShow: false,
        ylskShow: false,
        isDialogVisible: false, // 控制弹窗显示的变量
        isSelectDialogVisible: false,
        dataList: [
          {
            time: 2,
            name: "wer",
            Etiology: "ooo",
            status: "1",
          },
          {
            time: -2,
            name: "XX",
            Etiology: "XX",
            status: "-1",
          },
          {
            time: 2,
            name: "XX",
            Etiology: "XX",
            status: "2",
          },
        ],
        isShowRiskInfo: false,
        //当前的预报产品的信息
        currentRiskInfo: null,
        //今日雨水情数据
        rainTodayValue: {
          warningRiver: 0,
          mainRiver: 0,
          warningReservoir: 0,
        },
        //默认河道水情数据
        RiverRainValue: null,
        //默认水库水情数据
        ReservoirRainValue: null,
        LatestRainList: [
          {
            latestobservetime: "2024-09-26 09:00:00",
            smallscalewaterstatus: 3.0,
            stnm: "阿勒泰水文站点",
            status_difference: "1",
          },
        ],
        //默认全部河道水情数据
        AllRiverRainValue: null,
        //默认全部水库水情数据
        AllReservoirRainValue: null,
        //地图站点信息数据
        StationList:[],
        RiverStationList: [],
        ReservoirStationList: [],
        //默认站点信息数据
       defaultRiverStationList:[],
       defaultReservoirStationList:[],
        //全部站点信息数据
        AllRiverStationList: [],
        AllReservoirStationList: [],
       

//流域及行政区信息
areaData:null,
        products: [],
        //风险预警产品颜色的数组
        productsColorArray: [
          { key: "红色", value: "#FF0000" },
          { key: "橙色", value: "#FFA500" },
          { key: "黄色", value: "yellow" },
        ],
        //触发下载的地址
        downloadUrl:
          "http://192.168.0.17:8085/files/DANGER_WARNING_PRODUCT/test01.docx",
        isShowRiverDialog:false,
        selectCurrentRiver:null,
      };
    },
    watch: {
      // map(newMap){
      //   const riskWarningLayer =
      //   newMap.layer.createVectorLayer("risk-warning-layer");
      //     waringProducts().forEach((item) => {
      //       newMap.marker.addMarker(
      //         item.area[0],
      //         item.area[1],
      //         riskWarningLayer,
      //         {
      //           imgUrl: require("@/assets/images/header/point.png"),
      //           scale: 1.2, //大小
      //           radius: 15,
      //           pBorderColor: "#000000",
      //           pBorderWidth: 1,
      //           pFillColor: "",
      //         },
      //         item.description
      //       );
      //     });
      // }
    },
    computed: {
      showQureyPanel() {
        return this.$store.getters["comprehenSive/SelectIndex"];
      },
      // products() {
      //   return waringProducts();
      // },
      warningAreas() {
        return warningArea();
      },
      defineScroll() {
        return {
          step: 0.5, // 数值越大速度滚动越快
          limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
          hoverStop: true, // 是否开启鼠标悬停stop
          direction: 1, // 0向下 1向上 2向左 3向右
          openWatch: true, // 开启数据实时监控刷新dom
          // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
          singleHeight: 0,
          // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
          singleWidth: 0,
          waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
        };
      },
      menus() {
        return menuDataFooter();
      },
    },
    mounted() {
      //获取今日雨水情数据
      getRainToday().then((res) => {
        this.rainTodayValue.warningRiver = res.data.超警戒河流;
        this.rainTodayValue.mainRiver = res.data.主要河流;
        this.rainTodayValue.warningReservoir = res.data.超汛限水库;
        console.log(this.rainTodayValue, "rainTodayValue");
      });
      //默认河道水情数据
      getRiverRain().then((res) => {
        this.LatestRainList = res.data;
        this.RiverRainValue = this.LatestRainList;
      });
      //默认水库水情数据
      getReservoirRain().then((res) => {
        this.ReservoirRainValue = res.data;
      });
      //默认全部河道水情数据
      getAllRiverRain().then((res) => {
        this.AllRiverRainValue = res.data;
      });
      //默认全部水库水情数据
      getAllReservoirRain().then((res) => {
        this.AllReservoirRainValue = res.data;
      });
      getRiverStationInfo().then((res) => {
        this.defaultRiverStationList= res.data;
        this.updateQxxxData(this.defaultRiverStationList);
        this.RiverStationList=this.defaultRiverStationList;
      });
      getReservoirStationInfo().then((res) => {
        this.defaultReservoirStationList = res.data;
        console.log(this.defaultReservoirStationList, "defaultReservoirStationList");
        this.updateQxxxData(this.defaultReservoirStationList);
      });
      //全部河道站点地图信息
      getAllRiverStationInfo().then((res) => {
        this.AllRiverStationList=res.data;
        
      })
      //全部水库站点地图信息
      getAllReservoirStationInfo().then((res) => {
        this.AllReservoirStationList=res.data;
      });
     

      //获取雨量实况数据
      getRiverList().then((res) => {
        this.riverList = res.data.areaRainSK;
        console.log(this.riverList, "riverList");
        this.dailyRainList = this.riverList;
        this.colorRange = res.data.areaRainLV;
        this.dailyRainList[0].colorRange = this.colorRange;
      }),
        getReserviorList().then((res) => {
          this.reserviorList = res.data.areaRainSK;
          console.log(this.reserviorList, "reserviorList");
        });
      getGullyList().then((res) => {
        this.gullyList = res.data.areaRainSK;
        console.log(this.gullyList, "gullyList");
      });
      getYhdList().then((res) => {
        this.yhdList = res.data.areaRainSK;
        console.log(this.yhdList, "yhdList");
      });

      //风险预警产品数据
      //风险预警产品数据
      warningProductList()
        .then((res) => {
          this.products = res.data;
          console.log(this.products);
          //将风险数据进行渲染
          const map = this.$props.map;
          // console.log(map);
          // const riskWarningLayer =
            // map.layer.createVectorLayer("risk-warning-layer");
          // this.products.forEach((item) => {
          //   const pos = item.pos.split(",");
          //   map.marker.addMarker(
          //     parseFloat(pos[0]),
          //     parseFloat(pos[1]),
          //     riskWarningLayer,
          //     {
          //       // imgUrl: require("@/assets/images/header/point.png"),
          //       scale: 1.2, //大小
          //       radius: 15,
          //       pBorderColor: "#000000",
          //       pBorderWidth: 1,
          //       pFillColor: this.getColor(item.color),
          //     },
          //     {
          //       title:item.description,
          //     }
          //   );
          // });
        })
        .catch((err) => console.log(err));
    },
    destroyed() {
      // this.removeAllLayer();
    },
    methods: {
      ...mapMutations(["updateQxxxData", "updateDailyRain"]),
       async ShowDetails() {
       
        if (this.hdShow) {
          await getRiverArea().then((res) => {
            this.areaData = res.data;
            console.log(res.data, "res.data1");
          });
        } else {
          await getReservoirArea().then((res) => {
            this.areaData = res.data;
            console.log(res.data, "res.data2");
          });
        }
        this.isDialogVisible = true;
        // this.detailsData = this.LatestRainList;
      },
      getylColor(info, value) {
        if(info[0].colorRange.length == 0) return '#000';
       
        let ylColor = '';
        // value = Math.abs(value); // 如果需要处理负数
        // 首先对dailyRainList.colorRange数组根据elementvalue进行升序排序
        info[0].colorRange.sort((a, b) => a.elementvalue - b.elementvalue);
        // 遍历排序后的数组
        for (let i = 0; i < info[0].colorRange.length - 1; i++) {
          // 如果value在当前元素的elementvalue和下一个元素的elementvalue之间
          if (
              value >= info[0].colorRange[i].elementvalue &&
              value < info[0].colorRange[i + 1].elementvalue
          ) {
            // 返回当前元素的elementcolor
            ylColor = `#${info[0].colorRange[i].elementcolor
                .toString(16)
                .padStart(6, '0')}`;
          }
        }
        // 如果value等于最大的elementvalue，返回最后一个元素的elementcolor
        if (value >= info[0].colorRange[info[0].colorRange.length - 1].elementvalue) {
          ylColor = '#000';
        }
        // 如果value小于最小的elementvalue，返回第一个元素的elementcolor
        if (value < info[0].colorRange[0].elementvalue) {
          ylColor = '#000';
        }
        return ylColor;
      },
      showPoints() {
        if (this.hdShow) {
         
            this.StationList=this.RiverStationList;
            
          
         
        } else {
        
            this.StationList=this.ReservoirStationList;
           
       
        }
        this.updateQxxxData([]);
        this.updateQxxxData(this.StationList);
      },
      showDailyRain() {
        console.log(this.dailyRainList, "this.dailyRainList");
        this.updateDailyRain([]);
        this.updateDailyRain(this.dailyRainList);
      },
      makingSelect() {
        this.isSelectDialogVisible = true;
      },
      changesq(val) {
        if (val == "hd") {
          this.hdShow = true;
          this.skShow = false;
          this.LatestRainList = this.RiverRainValue;
          this.RiverStationList=this.defaultRiverStationList;
        } else {
          this.hdShow = false;
          this.skShow = true;
          this.LatestRainList = this.ReservoirRainValue;
          this.ReservoirStationList=this.defaultReservoirStationList;
        }
      },
      getAllRain() {
        if (this.hdShow) {
          this.LatestRainList = this.AllRiverRainValue;
          this.RiverStationList=this.AllRiverStationList;
        } else {
          this.LatestRainList = this.AllReservoirRainValue;
          this.ReservoirStationList=this.AllReservoirStationList;
        }
      },

      changeyl(val) {
        if (val == "zxhl") {
          this.zxhlShow = true;
          this.shgShow = false;
          this.ylskShow = false;
          this.yhdShow = false;
          this.dailyRainList = this.riverList;
          this.dailyRainList[0].colorRange = this.colorRange;
          console.log(this.dailyRainList, "this.dailyRainList11111111");
        } else if (val == "shg") {
          this.zxhlShow = false;
          this.shgShow = true;
          this.ylskShow = false;
          this.yhdShow = false;
          this.dailyRainList = this.gullyList;
          this.dailyRainList[0].colorRange = this.colorRange;
          console.log(this.dailyRainList, "this.dailyRainList22222222");
        } else if (val == "ylsk") {
          this.zxhlShow = false;
          this.shgShow = false;
          this.ylskShow = true;
          this.yhdShow = false;
          this.dailyRainList = this.reserviorList;
          this.dailyRainList[0].colorRange = this.colorRange;
          console.log(this.dailyRainList, "this.dailyRainList33333333");
        } else {
          this.zxhlShow = false;
          this.shgShow = false;
          this.ylskShow = false;
          this.yhdShow = true;
          this.dailyRainList = this.yhdList;
          this.dailyRainList[0].colorRange = this.colorRange;
          console.log(this.dailyRainList, "this.dailyRainList44444444");
        }
      },
      ShowRainPoints(item) {
        const center = [item.lgtd, item.lttd];
        const map = this.$props.map;
        map.layer.createMaskLayer("");
        console.log(map);
        const view = map.view;
        view.animate({
          center,
          zoom: 8,
          duration: 1000,
        });
      },
      handleUpdateData(newData) {
        this.dailyRainList = newData;
        console.log(this.dailyRainList, "this.dailyRainList1111111111");
      },
      showRiskMark(target) {
        const center = target.pos.split(",").map((num) => parseFloat(num));
        const map = this.$props.map;
        const view = map.view;
        view.animate({
          center,
          zoom: 8,
          duration: 1000,
        });
      },

      //以列表的方式显示风险预警的信息
      showRiskInfo(target) {
        this.currentRiskInfo = target;
        this.isShowRiskInfo = true;
      },
      //将风向预警的信息导出
      downloadRiskInfo(target) {
        console.log(target);
        //创建一个下载的a标签
        const a = this.$refs.downloadContainer;
        a.href = target.docpath;
        a.click();
      },
      //点击风险预警信息
      clickItem(e) {
        const func = e.target.getAttribute("data-func");
        const id = e.target.getAttribute("data-id");
        const target = this.products.find((item) => item.docid == id);
        console.log(target);
        //视图跳转
        if (func == "mark") {
          this.showRiskMark(target);
        }
        //显示预警信息
        else if (func == "show") {
          this.showRiskInfo(target);
        }
        //下载遇险信息
        else if (func == "download") {
          this.downloadRiskInfo(target);
        }
      },
      closed() {
        this.isShowRiskInfo = false;
      },


      //处理实况查询
      handFacts(mapShowOfType, datas) {
        const positions = [];
        const rain = [];
        const names = [];
        datas.forEach((data) => {
          const position = [data.longitude, data.latitude];
          positions.push(position);
          rain.push(data.rain);
          names.push(data.stationName);
        });
        const source = new VectorSource();
        positions.forEach((position, index) => {
          source.addFeature(
            new Feature({
              geometry: new Point(position),
              weight: rain[index],
              name:names[index],
            })
          );
        });
        //添加点图层
        let layer;
        if (mapShowOfType == "1") {
          layer = new Vector({
            name: "facts-layer",
            source: source,
            style: (feature) => {
              return new Style({
                text: new Text({
                  offsetX: 0,
                  offsetY: 10,
                  font: "normal 16px 宋体",
                  text: feature.get("weight") + "\n" + feature.get("name"),
                  fill: new Fill({
                    color: "#3EAAE1",
                  }),
                  //   stroke: new Stroke({
                  //     color: "#ff2d51",
                  //     width: 2,
                  //   }),
                }),
              });
            }})}
      //添加热力图
      else if (mapShowOfType == "2") {
        layer = new Heatmap({
          name: "facts-layer",
          source: source,
          blur: 20,
          radius: 15,
          weight: function (feature) {
            return feature.get("weight") * 10;
          },
        });
      }
      layer.setZIndex(50);
      const map = this.$props.map;
      const view = map.view;
      view.animate({
        center: positions[0],
        zoom: 8,
        duration: 1000,
      });
      //判断是否有对应的图层
      let flag = false;
      let lastLayer;
      map.map
        .getLayers()
        .getArray()
        .forEach((layer) => {
          if (layer.get("name") == "facts-layer") {
            flag = true;
            lastLayer = layer;
            return;
          }
        });
      if (flag) {
        map.map.removeLayer(lastLayer);
      }
      map.map.addLayer(layer);
      console.log(map.map.getLayers().getArray());
    },

    //处理雷达的事务
    handleLeida(data) {
      //判断是否有雷达图层
      const map = this.$props.map;
      map.map
        .getLayers()
        .getArray()
        .forEach((layer) => {
          if (layer.get("name") == "Leida-layer") {
            map.map.removeLayer(layer);
          }
        });
      data.forEach((item, index) => {
        //创捷多个图片图层
        const path = item.path;
        const west = item.west;
        const south = item.south;
        const east = item.east;
        const north = item.north;
        const imageLayer = new Image({
          name: "Leida-layer",
          source: new ImageStatic({
            url: path,
            imageExtent: transformExtent(
              [west, south, east, north],
              "EPSG:4326",
              "EPSG:4326"
            ),
          }),
          opacity:0.5,
        });
        imageLayer.setZIndex(20);
        map.map.addLayer(imageLayer);
        map.view.animate({
          center: [west, south],
          duration: 1000,
        });
      });
    },

    //添加云图的数据
    handleYunTu(data) {
      //判断是否有云图的图层
      const map = this.$props.map;
      map.map
        .getLayers()
        .getArray()
        .forEach((layer) => {
          if (layer.get("name") == "YunTu-layer") {
            map.map.removeLayer(layer);
          }
        });
      console.log(data);
      data.forEach((item) => {
        //每一张图片对应一个图片图层
        const path = item.path;
        const west = item.west;
        const south = item.south;
        const east = item.east;
        const north = item.north;
        const imageLayer = new Image({
          name: "Leida-layer",
          source: new ImageStatic({
            url: path,
            imageExtent: transformExtent(
              // [69.446960,32.12374,102.995751,51.367755],
              [69.446960,32.12374,102.995751,50],
              "EPSG:4326",
              "EPSG:4326"
            ),
          }),
        });
        imageLayer.setZIndex(20);
        map.map.addLayer(imageLayer);
        // map.view.animate({
        //   center: [69.446960,32.12374],
        //   duration: 1000,
        // });
      });
    },

    //返回一个颜色值
    getColor(key) {
      return this.productsColorArray.find((item) => item.key == key).value;
    },

    //风向区域规划
    getRiskZoningInfo(msg) {
      console.log(msg);
      //判断是否有云图的图层
      const map = this.$props.map;
      const imageLayer = new Image({
        name: "RiskZoing-layer",
        source: new ImageStatic({
          url: msg,
          imageExtent: transformExtent(
            [69.446960,32.12374,102.995751,51.367755],
            "EPSG:4326",
            "EPSG:4326"
          ),
        }),
      });
      imageLayer.setZIndex(20);
      map.map.addLayer(imageLayer);
    },
    //处理预报
    //预处理预报的图片
    handleYuBao(datas,showType){
      console.log(datas);
      //网格显示
      const map = this.$props.map;
      if(showType == '1'){
        const features = [];
        datas.forEach(data=>{
          const lats = data.rltmap.lats;
          const lngs = data.rltmap.lons;
          const vals = data.rltmap.vals;
          let filterData = [];
          lats.forEach((lat,index)=>{
            if(lat != null){
              filterData.push({
                lat:lat,
                lng:lngs[index],
                val:vals[index],
              })
            }
          })
          filterData = this.filterPointsByStep(filterData,450,9);
          filterData.forEach(item=>{
            const feature = new Feature({
                geometry:new Point([item.lat,item.lng]),
                val:item.val + '',
              });
              features.push(feature);
          })
        })
        const source = new VectorSource({
          features:features,
        });
        const girdLayer = new Vector({
          source,
          style:(feature)=>{
            return new Style({
              text:new Text({
                offsetX:0,
                offsetY:0,
                font:"normal 12px 微软雅黑",
                text:feature.get("val"),
                fill:new Fill({
                color:"#333",
                }),

              })
            })
          },
          name:"yubao-ER03-grid-layer",
        });
        
        girdLayer.setZIndex(20);
        map.map.addLayer(girdLayer);
        // map.view.animate({
        //   center: [34.3,73.5],
        //   duration: 1000,
        // });
      }
      //填色显示
      else if(showType == '2'){
      datas.forEach((data,index)=>{
        const url = "data:image/png;base64," + data.gridDataPicAndXY.filedata;
        const xmin = data.gridDataPicAndXY.xmin;
        const ymin = data.gridDataPicAndXY.ymin;
        const xmax = data.gridDataPicAndXY.xmax;
        const ymax = data.gridDataPicAndXY.ymax;
        const imageLayer = new Image({
        name: "yubao-grid-layer" + index,
        source: new ImageStatic({
          url: url,
          imageExtent: transformExtent(
            [xmin,ymin,xmax,ymax],
            "EPSG:4326",
            "EPSG:4326"
          ),
        }),
      });
        imageLayer.setZIndex(20);
        map.map.addLayer(imageLayer);
      })}
    },
    //显示河流的图标数据
    handleShowRiverInfoCharts(selectRiver){
      console.log(selectRiver);
      this.selectCurrentRiver = selectRiver;
      this.isShowRiverDialog = true;
    },
    //关闭河流的图标弹窗
    closedRiverDialog(){
      this.isShowRiverDialog = false;
    },

    //过滤数据
    filterPointsByStep(points, numCols, step) {
        const filteredPoints = [];
        for (let i = 0; i < points.length; i++) {
          // 计算当前点的行索引和列索引
          const rowIndex = Math.floor(i / numCols);
          const colIndex = i % numCols;
          // 检查行索引和列索引是否都是步长的倍数
          if (rowIndex % step === 0 && colIndex % step === 0) {
            filteredPoints.push(points[i]);
          }
        }
        return filteredPoints;
      },
  },}

</script>

<style scoped lang="scss">
.red-text {
  color: rgb(241, 67, 67);
  font-weight: bold;
}

.green-text {
  color: rgb(58, 235, 58);
  font-weight: bold;
}
button {
  border: none !important;
  
}
button:active, button:focus {
    outline: none;
    border: none;
}
.right {
  position: absolute;
  top: 1rem;
  right: 10px;
  width: 27vw;
  height: 88vh;
  z-index: 1;

  // 右上
  .right-top {
    display: flex;
    position: relative;
    width: 100%;
    height: 25%;

    .right-top-left {
      position: absolute;
      left: 8%;
      width: 20%;
      height: 100%;
      background-image: url("/src/assets/images/panel/right-panel01 .png");
      background-size: contain;
      background-repeat: no-repeat;
    }

    .right-top-right {
      position: absolute;
      right: 0;
      width: 80%;
      height: 100%;

      .right-top-content {
        overflow: hidden;
        height: 85%;
        padding: 0 5px;
        background-color: #00274c;
      }

      .right-top-content li {
        background-color: #374352;
        margin-top: 8px;
        padding: 5px 5px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 5px;

        span {
          font-size: 15px;
          font-family: "华文中宋";

          &:hover {
            cursor: pointer;
          }
        }

        .icon-btn {
          display: flex;
          gap: 10px;
        }

        .iconfont {
          color: #4d6675;

          &:hover {
            cursor: pointer;
          }
        }
      }

      .right-top-bottom {
        position: absolute;
        bottom: -2px;
        width: 100%;
        height: 10px;
        background-image: url("/src/assets/images/panel/bottom.png");
        background-size: contain;
        background-repeat: no-repeat;
      }
    }
  }

  //右中
  .right-mid {
    margin-top: 10px;
    display: flex;
    position: relative;
    width: 100%;
    height: 30%;

    .right-mid-left {
      position: absolute;
      left: 8%;
      width: 20%;
      height: 100%;
      background-image: url("/src/assets/images/panel/right-panel01 .png");
      background-size: contain;
      background-repeat: no-repeat;
    }

    .right-mid-right {
      position: absolute;
      right: 0;
      width: 80%;
      height: 100%;

      .right-mid-content {
        position: absolute;
        width: 100%;
        top: 12%;
        // background-image: url("/src/assets/images/header/u0_state0.jpg");
        background-color: #06213b;
        background-size: contain;
        height: 88%;
        overflow: hidden;

        .line1 {
          margin-top: 0.5rem;
          display: flex;
          justify-content: space-evenly;
          align-items: center;
        }

        .line2 {
          display: flex;
          justify-content: space-evenly;
          align-items: center;
        }
      }
    }

    .right-mid-bottom {
      position: absolute;
      bottom: -3px;
      width: 100%;
      height: 10px;
      background-image: url("/src/assets/images/panel/bottom.png");
      background-size: contain;
      background-repeat: no-repeat;
    }
  }

  // 右下
  .right-bottom {
    margin-top: 10px;
    display: flex;
    position: relative;
    width: 100%;
    height: 25%;

    .right-bottom-left {
      position: absolute;
      left: 8%;
      width: 20%;
      height: 100%;
    }

    .right-bottom-right {
      position: absolute;
      right: 0;
      width: 80%;
      height: 100%;
    }

    .right-bottom-content {
      // background-image: url("/src/assets/images/header/u0_state0.jpg");
      background-color: #06213B;
      background-size: contain;
      width: 100%;
      // height: 100%;
    }

    .right-bottom-bottom {
      position: absolute;
      bottom: -38px;
      width: 100%;
      height: 10px;
      background-image: url("/src/assets/images/panel/bottom.png");
      background-size: contain;
      background-repeat: no-repeat;
    }
  }
}

.title {
  display: flex;
    justify-content: center;
    align-items: center;
    width: 81%;
    height: 10%;
    background-color: rgba(0, 35, 71, 0.7);
    margin-left: 5rem;
    margin-bottom: 0.5rem;
    margin-top: 1rem;

  &:hover {
    cursor: pointer;
  }

  .title-image1 {
    width: 30%;
    height: 100%;
    background-image: url("/src/assets/images/panel/left.png");
    background-size: 120%;
    background-position: center;
    background-repeat: no-repeat;
  }

  .title-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    color: white;
    margin-top: 5px;
    width: 40%;
    font-size: 26px;
    font-weight: bold;
  }

  .title-image2 {
    width: 30%;
    height: 100%;
    background-image: url("/src/assets/images/panel/right.png");
    background-size: 120%;
    background-position: center;
    background-repeat: no-repeat;
  }
}

.warp {
  overflow: hidden;
}

/* 根据需要调整这个值 */
.left-panel {
  width: 27vw;
  height: 88vh;
  margin-top: 1rem;
  // border: 1px solid black;
  z-index: 21;
  margin-left: 0.5rem;
  position: absolute;
  left: 0;
  // background-color: rgba(37, 74, 100, 0.6);

  .left-panel-title {
    width: 90%;
    height: 10%;
    display: flex;
    background-color: rgba(0, 35, 71, 0.7);
    margin-top: 1rem;
    // border: 1px solid black;

    .title-img {
      width: 100%;
      height: 100%;
    }

    .title-left {
      width: 30%;
      height: 100%;
      background-image: url("/src/assets/images/panel/left.png");
      background-size: 120%;
      background-position: center;
      // border: 1px solid black;
    }

    .title-center {
      width: 33%;
      height: 100%;
      text-align: center;
      font-size: 1.5rem;
      line-height: 279%;

      // border: 1px solid black;
      font-weight: bold;
      color: white;
    }

    .title-right {
      width: 30%;
      height: 100%;
      background-image: url("/src/assets/images/panel/right.png");
      background-size: 120%;
      background-position: center;
      // border: 1px solid black;
    }
  }

  .left-panel-content {
    width: 100%;
    height: 90%;
    display: flex;

    .left-panel-content-leftcontent {
      width: 90%;
      height: 100%;

      .left-panel-content1 {
        width: 100%;
        height: 20%;
        margin-top: 1rem;
        // border: 1px solid black;

        // display: flex;
        .left-panel-content1-title {
          width: 100%;
          height: 20%;
          // border: 1px solid black;
          display: flex;
          // background-image: url('../assets/images/left-panel/panel-backimage.png');
        }

        .left-panel-content1-content {
          width: 100%;
          height: 80%;
          // border: 1px solid black;

          display: flex;
          background-color: rgba(0, 35, 71, 0.7);
          .ysq1 {
            width: 33%;
            height: 80%;
            // border: 1px solid black;

            .number {
              width: 100%;
              height: 60%;
              line-height: 250%;
              color: red;
              text-align: center;
              font-size: 1.5rem;
              font-weight: bold;
            }

            .type {
              width: 100%;
              height: 20%;
              text-align: center;
              font-size: 0.8rem;
              font-weight: bold;
              color: white;
            }
          }

          .ysq2 {
            width: 33%;
            height: 80%;
            // border: 1px solid black;

            .number {
              width: 100%;
              height: 60%;
              line-height: 250%;
              color: orange;
              text-align: center;
              font-size: 1.5rem;
              font-weight: bold;
            }

            .type {
              width: 100%;
              height: 20%;
              text-align: center;
              font-size: 0.8rem;
              font-weight: bold;
              color: white;
            }
          }

          .ysq3 {
            width: 33%;
            height: 80%;
            // border: 1px solid black;

            .number {
              width: 100%;
              height: 60%;
              line-height: 250%;
              color: white;
              text-align: center;
              font-size: 1.5rem;
              font-weight: bold;
            }

            .type {
              width: 100%;
              height: 20%;
              text-align: center;
              font-size: 0.8rem;
              font-weight: bold;
              color: white;
            }
          }
        }
      }

      .left-panel-content2 {
        width: 100%;
        height: 35%;
        margin-top: 1rem;
        // border: 1px solid black;

        .left-panel-content2-title {
          width: 100%;
          height: 10%;
          // border: 1px solid black;
          display: flex;
          background: linear-gradient(
            to right,
            rgba(11, 33, 61, 1),
            rgba(35, 77, 120, 0.5)
          );

          .content2-title-left {
            width: 30%;
            height: 100%;
            line-height: 200%;
            text-align: center;
            // border: 1px solid black;
            font-size: 1rem;
            color: white !important;
          }

          .content2-menu {
            font-size: 0.7rem;
            margin-left: 0.25rem;
            color: white;
            background-color: #335b8a;
          }

          .content2-menu.active {
            background-color: #18989f;
            color: white;
          }

          .content2-menu:hover {
            background-color: #18989f;
            /* 鼠标滑过时的背景颜色 */
          }

          .content2-menu:active {
            background-color: #18989f;
            /* 鼠标点击时的背景颜色 */
          }

          .content2-menu:focus {
            background-color: #18989f;
            /* 鼠标点击时的背景颜色 */
          }
          .detail {
            z-index: 1000 !important;
          }
          .content2-tool {
            font-size: 0.5rem;
            margin-left: 0.35rem;
            color: white;
            background-color: #335b8a;
          }

          .content2-tool:hover {
            background-color: #18989f;
            /* 鼠标滑过时的背景颜色 */
          }

          .content2-tool:active {
            background-color: #18989f;
            /* 鼠标滑过时的背景颜色 */
          }

          .content2-tool:focus {
            background-color: #18989f;
            /* 鼠标滑过时的背景颜色 */
          }

          .content2-tool1 {
            font-size: 0.5rem;
            margin-left: 2.5rem;
          }

          // background-image: url('../assets/images/left-panel/panel-backimage.png');
        }

        .left-panel-content2-content {
          width: 100%;
          height: 80%;
          // border: 1px solid black;
          background-color: rgba(0, 35, 71, 0.7);

          .table-header {
            width: 100%;
            height: 20%;
            color: white;
            // border: 1px solid black;
            display: flex;
            font-size: 0.8rem;

            .col1 {
              width: 30%;
              height: 100%;
              text-align: center;
              // border: 1px solid black;
              line-height: 200%;
            }

            .col2 {
              width: 35%;
              height: 100%;
              text-align: center;
              // border: 1px solid black;
              line-height: 200%;
            }

            .col3 {
              width: 20%;
              height: 100%;
              text-align: center;
              // border: 1px solid black;
              line-height: 200%;
            }

            .col4 {
              width: 11%;
              height: 100%;
              text-align: center;
              // border: 1px solid black;
              line-height: 200%;
            }
          }

          .table-content {
            width: 100%;
            height: 80%;
            overflow: hidden;
            // border: 1px solid black;

            .scroll_box {
              // height: 100%;

              // width: 100%;
              // font-size: 1rem;
              // text-align: center;
              // border: 1px solid black;
            }




              li {
                // margin-left: -2rem;
                // width: 100%;
                // height: 10%;
                font-size: 0.7rem;
                // padding: 10px 0;
                // margin: 5px;
                list-style-type: none;
                margin-top: 8px;
                padding: 5px 5px;
                 
                height: 20%;
                span {
                  display: inline-block;
                  height: 100%;
                }

                .name {
                  width: 33%;
                  // border: 1px solid black;
                }

                .Etiology {
                  width: 40%;
                  // border: 1px solid black;
                }

                .status {
                  width: 10%;
                  text-align: center;
                  // margin-left:0.1rem;
                  // border: 1px solid black;
                }

                .time {
                  width: 17%;
                  text-align: center;
                  // border: 1px solid black;
                }
              }
              li:hover {
                cursor: pointer;
              }
            }

        }
        .time {
          width: 17%;
          text-align: center;
          // border: 1px solid black;
        }
      }
      li:hover {
        cursor: pointer;
      }
    }
  }
}

.left-panel-content3 {
  width: 100%;
  height: 35%;
  height: 42%;
  // border: 1px solid black;

  .left-panel-content3-title {
    width: 100%;
    height: 9%;
    // border: 1px solid black;
    display: flex;
    background: linear-gradient(
      to right,
      rgba(11, 33, 61, 1),
      rgba(35, 77, 120, 0.5)
    );

    .content3-title-left {
      width: 30%;
      height: 100%;
      line-height: 200%;
      text-align: center;
      // border: 1px solid black;
      font-size: 1rem;
    }

    .content3-menu {
      font-size: 0.7rem;
      margin-left: 0.25rem;
      background-color: #335b8a;
      color: white;
    }

    .content3-menu.active {
      background-color: #18989f;
      color: white;
    }

    .content3-menu:hover {
      background-color: #18989f;
      /* 鼠标滑过时的背景颜色 */
    }

    .content3-menu:active {
      background-color: #18989f;
      /* 鼠标点击时的背景颜色 */
    }

    .content3-menu:focus {
      background-color: #18989f;
      /* 鼠标点击时的背景颜色 */
    }

    .content3-tool {
      font-size: 0.5rem;
      margin-left: 0.35rem;
      background-color: #335b8a;
      color: white;
    }

    .content3-tool:hover {
      background-color: #18989f;
      /* 鼠标滑过时的背景颜色 */
    }

    .content3-tool:active {
      background-color: #18989f;
      /* 鼠标滑过时的背景颜色 */
    }

    .content3-tool:focus {
      background-color: #18989f;
      /* 鼠标滑过时的背景颜色 */
    }

    .content3-tool1 {
      font-size: 0.5rem;
      margin-left: 0.5rem;
    }
    .Dialog {
      z-index: 5000;
    }
  }

  .left-panel-content3-content {
    width: 100%;
    height: 80%;
    // border: 1px solid black;
    background-color: rgba(0, 35, 71, 0.7);
    .table-header {
      width: 100%;
      height: 20%;
      color: white;
      font-size: 0.8rem;
      // border: 1px solid black;
      display: flex;

      .col1 {
        width: 15%;
        height: 100%;
        text-align: center;
        // border: 1px solid black;
        line-height: 200%;
      }

      .col2 {
        width: 30%;
        height: 100%;
        text-align: center;
        // border: 1px solid black;
        line-height: 200%;
      }

      .col3 {
        width: 20%;
        height: 100%;
        text-align: center;
        // border: 1px solid black;
        line-height: 200%;
      }

      .col4 {
        width: 50%;
        height: 100%;
        text-align: center;
        // border: 1px solid black;
        line-height: 200%;
      }
    }

    .table-content {
      width: 100%;
      height: 80%;
      // border: 1px solid black;

      .scroll_box {
        height: 100%;
        overflow: hidden;
        width: 100%;
        font-size: 1rem;
        text-align: center;
        // border: 1px solid black;
      }

   

        li {
          margin-left: 0rem;
          width: 100%;
          height: 10%;
          font-size: 0.7rem;
          // padding: 10px 0;
          // margin: 5px;
          list-style-type: none;
          margin-top: 1rem;
          padding: 5px 5px;
          span {
            display: inline-block;
            height: 100%;
          }

          .name {
            width: 10%;
            // border: 1px solid black;
          }

          .Etiology {
            width: 25%;
            // border: 1px solid black;
          }

          .status {
            width: 20%;
            text-align: center;
            // border: 1px solid black;
          }

          .time {
            width: 40%;
            // border: 1px solid black;
          }
        }
        li:hover {
          cursor: pointer;
        }
   
    }
  }
}

.left-panel-content-rightcontent {
  width: 10%;
  height: 100%;
  // border: 1px solid black;

  .right-img1 {
    width: 100%;
    height: 20%;
    // border: 1px solid black;
    margin-top: 1rem;
    background-image: url("/src/assets/images/panel/left-panel01.png");
    background-size: contain;
    background-repeat: no-repeat;
  }

  .right-img2 {
    width: 100%;
    height: 32%;
    margin-top: 1rem;
    // border: 1px solid black;
    background-image: url("/src/assets/images/panel/left-panel01.png");
    background-size: 100% 100%;

    background-repeat: no-repeat;
  }

  .right-img3 {
    width: 100%;
    height: 35%;
    // border: 1px solid black;
    // background-image: url('/src/assets/images/panel/left-panel01.png');
    background-size: 100% 100%;

    background-repeat: no-repeat;
  }
}
</style>
